<script setup lang="ts">
defineOptions({
  name: "searchGas"
});

import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { queryPointInfoByPid } from "@/api/modules/operation";
import { useThrottleFn } from "@vueuse/core";
import { throttleDelay as delay } from "@/utils/constant";
import dayjs from "dayjs";

const dateValue = ref<Array<string>>([dayjs().subtract(1, "hour").format("YYYY-MM-DD HH:mm:ss"), dayjs().format("YYYY-MM-DD HH:mm:ss")]);
const period = ref<"minutes" | "hour" | "day" | "week" | "months">("minutes");
const specCodeListValue = ref<Array<string>>([]);
const specCodeListOption = ref<Array<any>>([]);
const pidCode = ref<string>("");
const loading = defineModel("loading", { type: Boolean, default: false });

const emits = defineEmits(["change"]);

const disabledDateFn = (date: Date) => {
  return dayjs(date).valueOf() > dayjs().valueOf();
};

const dateValueChangeHandler = (val: Array<string>) => {
  const [s, e] = val;
  if (dayjs(e).diff(s, "month") > 2) {
    period.value = "months";
  } else if (dayjs(e).diff(s, "week") > 4) {
    period.value = "week";
  } else if (dayjs(e).diff(s, "day") > 2) {
    period.value = "day";
  } else if (dayjs(e).diff(s, "hour") > 1) {
    period.value = "hour";
  } else {
    period.value = "minutes";
  }
  emits("change", getParams());
};

const latelyOneHourHandler = useThrottleFn(() => {
  period.value = "minutes";
  dateValue.value = [dayjs().subtract(1, "hour").format("YYYY-MM-DD HH:mm:ss"), dayjs().format("YYYY-MM-DD HH:mm:ss")];
  emits("change", getParams());
}, delay);

const lastOneHourHandler = useThrottleFn(() => {
  period.value = "minutes";
  let [s, e] = dateValue.value;
  s = dayjs(s).subtract(1, "hour").format("YYYY-MM-DD HH:mm:ss");
  e = dayjs(s).add(1, "hour").format("YYYY-MM-DD HH:mm:ss");
  dateValue.value = [s, e];
  emits("change", getParams());
}, delay);

const nextOneHourHandler = useThrottleFn(() => {
  period.value = "minutes";
  let [s, e] = dateValue.value;
  e = dayjs(e).add(1, "hour").format("YYYY-MM-DD HH:mm:ss");
  s = dayjs(e).subtract(1, "hour").format("YYYY-MM-DD HH:mm:ss");
  if (dayjs().isBefore(dayjs(e))) {
    s = dayjs().subtract(1, "hour").format("YYYY-MM-DD HH:mm:ss");
    e = dayjs().format("YYYY-MM-DD HH:mm:ss");
  }
  dateValue.value = [s, e];
  emits("change", getParams());
}, delay);

const getParams = () => {
  const specCodeList = specCodeListValue.value;
  const [startTime, endTime] = dateValue.value;
  const timePeriod = period.value;
  return { pidCode: pidCode.value, specCodeList, startTime, endTime, timePeriod };
};

const pointListChangeHandler = (val: any) => {
  emits("change", getParams());
};

const init = async () => {
  loading.value = true;
  const {
    query: { pidCode: pidCode_ = "", pointName = "" }
  } = useRoute();
  if (!pidCode_) return;
  pidCode.value = pidCode_ as string;
  const onlyNumberPoint = true;
  const params = { pidCode: pidCode_, onlyNumberPoint };
  const res = await queryPointInfoByPid(params, () => {
    loading.value = false;
  });
  loading.value = false;
  if (!res?.length) return;
  pointName && (specCodeListValue.value = [pointName as string]);
  specCodeListOption.value = res;
  emits("change", getParams(), true);
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <div class="search-gas">
    <div class="search-gas-top">
      <div class="search-gas-top-date">
        <div class="search-gas-top-date-lable">选择日期</div>
        <px-date-picker
          v-model="dateValue"
          type="datetimerange"
          :editable="false"
          :clearable="false"
          range-separator="-"
          :prefix-icon="null"
          :default-time="[new Date(2000, 1, 1, 0, 0), new Date(2000, 1, 1, 0, 59)]"
          format="YYYY-MM-DD HH:mm"
          value-format="YYYY-MM-DD HH:mm:ss"
          :disabled-date="disabledDateFn"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateValueChangeHandler"
        />
      </div>
      <div class="search-gas-top-btns">
        <px-button type="primary" @click="latelyOneHourHandler">最近一小时</px-button>
        <px-button type="primary" plain @click="lastOneHourHandler">上一小时</px-button>
        <px-button type="primary" plain @click="nextOneHourHandler">下一小时</px-button>
      </div>
    </div>
    <div class="search-gas-bottom">
      <px-scrollbar height="130px">
        <px-checkbox-group v-model="specCodeListValue" :min="1" :max="2" @change="pointListChangeHandler">
          <px-checkbox v-for="item in specCodeListOption" :key="item.specCode" :label="item.specCode">{{ item.specName }}</px-checkbox>
        </px-checkbox-group></px-scrollbar
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
.search-gas {
  width: 100%;

  .search-gas-top {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;

    .search-gas-top-date {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      overflow: hidden;
      background-color: #f0f2f5;
      border: 1px solid #dfdfdf;
      border-radius: 4px;

      .search-gas-top-date-lable {
        box-sizing: border-box;
        height: 100%;
        padding: 0 14px;
        font-weight: 500;
        color: #555;
        white-space: nowrap;
        background-color: #f2f2f2;
      }
    }

    .search-gas-top-btns {
      display: flex;
      align-items: center;
    }
  }

  .search-gas-bottom {
    width: 100%;
  }
}

:deep(.px-date-editor) {
  .px-range__icon {
    display: none;
  }

  &.px-input__wrapper {
    border: none;

    &.is-focus {
      border: none;
      box-shadow: none;
    }
  }
}
</style>
